<style>
.layui-form-switch {
    min-width: 55px;
}
.layui-form-checkbox {height: 22px;line-height: 20px;margin-right: 0px;padding-right: 20px;}
.layui-form-checkbox i {right: 3px;width: 20px;font-size: 16px;top: 2px;}

</style>
<div class="ibox">
    <div class="ibox-title">
       <h5>系统菜单管理</h5>
    <div class="nowrap pull-right" style="margin-top:10px">
	   	<button data-modal='menu/add' data-title="添加菜单" class='layui-btn layui-btn-small'><i class='fa fa-plus'></i> 添加菜单</button>
	   	<button data-update data-field='delete' data-action='menu/del' class='layui-btn layui-btn-small layui-btn-danger'><i class='fa fa-remove'></i> 删除菜单</button>
	</div>
    </div>
   	<div class="ibox-content fadeInUp animated">
<form onsubmit="return false;" data-auto="" method="POST" class="layui-form">
    <input type="hidden" value="resort" name="action"/>
    <table class="table table-hover">
        <thead>
            <tr>
                <th class='text-center'>排序</th>
                <th class='text-center'></th>
                <th>菜单名称</th>
                <th class='text-left'>菜单链接</th>
                
                <th class='text-left'>关联节点</th>
                <th class='text-center'>启用状态</th>
                <th class='text-center'>操作</th>
            </tr>
        </thead>
        <tbody>
             <#list menus as menu>
            <tr>
                <td class='list-table-sort-td'>
                    <input name="${menu.id}" value="${menu.sort}" class='list-sort-input sort-input'/>
                </td>
                <td class='text-center'>
                    <i style="font-size:18px;" class="${menu.icon}"></i>
                </td>
                <td>${menu.key!""} ${menu.title}</td>
                <td class='text-left'>${menu.url}</td>
                <td class='text-left'>${(menu.node.title)!""}</td>
                <td class='text-center'>
                     <input type="checkbox" value="${menu.id?c}" ${menu.status?string("checked","")}  lay-skin="switch"  lay-filter="status" lay-text="启用|禁用"/>
                 
                </td>
              
                <td class='text-center nowrap'>
                    <span class="text-explode">|</span>
                    <a data-modal='menu/form?id=${menu.id}' href="javascript:void(0)">编辑</a>
                    <span class="text-explode">|</span>
                    <a data-update="${menu.id?c}" data-field='delete' data-action='menu/del' href="javascript:void(0)">删除</a>
                    
                </td>
            </tr>
            </#list>
        </tbody>
    </table>
</form>
</div>
</div>
<script>



    $(function () {
        $('input.sort-input').on('blur', function () {
            $.form.load('menu/updateSort', {name: this.name, value: this.value}, 'POST', function (ret) {
                return false;
            });
        });
    });
    layui.use('form', function(){
  	  var form = layui.form(); 
  	  var jq = layui.jquery();

  	  form.render();
  	  form.on('switch(status)', function(data){
  	  		var y=this.checked;
  	  		var id=this.value;
  	  	
  	  		$.get("menu/updateStatus", {status:(y?1:0),id:id}, function(data1, textStatus, req) {
  	  			res=new Object();
  	  			res.code = 1;
  				res.wait = 3;
  				res.msg = '菜单'+(y?'启用':'停用')+'操作成功！';
  	  			$.msg.auto(res, 1);
  	  		});
  		  });
  	form.on('checkbox(checkAll)', function(data){
        if(data.elem.checked){
          $("input[lay-filter='checkOne']").prop('checked',true);
        }else{
          $("input[lay-filter='checkOne']").prop('checked',false);
        }
        form.render('checkbox');
      });  

      form.on('checkbox(checkOne)', function(data){
        var is_check = true;
        if(data.elem.checked){
          $("input[lay-filter='checkOne']").each(function(){
            if(!$(this).prop('checked')){ is_check = false; }
          });
          if(is_check){
            $("input[lay-filter='checkAll']").prop('checked',true);
          }
        }else{
          $("input[lay-filter='checkAll']").prop('checked',false);
        } 
        form.render('checkbox');
      });
  	}); 
    
    

    
</script>